<template>
  <div id="zhi-list">
    <div class="step-two">
      <div class="two-search-box">
        <div class="two-search">
          <div>时间段：</div>
          <el-date-picker
            v-model="form.startTime"
            type="date"
            size="large"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            placeholder="开始时间"
          />
          -
          <el-date-picker
            v-model="form.endTime"
            type="date"
            size="large"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            placeholder="结束时间"
          />
          <div class="all-btn" @click="search">搜索</div>
        </div>
        <div class="two-btns">
          <div class="all-btn" @click="handleAddAgent()">
            <el-icon>
              <CirclePlus />
            </el-icon>
            添加考核智能体
          </div>
          <div class="all-btn" @click="$router.push('/zhinengti')">
            <el-icon>
              <ArrowLeft />
            </el-icon>
            返回上一级
          </div>
        </div>
      </div>
      <div class="all-box">
        <div>
          <el-table :data="tableData" style="width: 100%">
            <!-- 加序号 -->
            <el-table-column
              type="index"
              width="60"
              :index="calculateIndex"
            ></el-table-column>
            <el-table-column prop="agentName" label="智能体" />
            <el-table-column prop="cronTime" label="开启时间" />
            <el-table-column label="操作" width="100">
              <template #default="scope">
                <div class="table-btns">
                  <!-- <div @click="handleEditAgent(scope.row)">修改</div> -->
                  <div @click="delAgent(scope.row)">删除</div>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="all-page">
            <el-pagination
              v-model:current-page="form.page"
              :page-size="10"
              layout="prev, pager, next, jumper"
              :total="total"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </div>

    <el-dialog v-model="dialogVisible" width="830" :before-close="handleClose">
      <div class="my-dialog">
        <div v-if="isEdit" class="my-dialog-title">修改考核智能体</div>
        <div v-else class="my-dialog-title">添加考核智能体</div>
        <div class="my-dialog-content">
          <div>
            <div class="item-label"><span class="red">*</span>智能体：</div>
            <div class="item-content">
              <el-select
                v-model="addForm.agentName"
                placeholder="请选择"
                size="large"
              >
                <el-option
                  v-for="item in agentOptions"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </div>
          </div>
          <div>
            <div class="item-label">时间：</div>
            <div class="item-content time-picker">
              <el-date-picker
                v-model="addForm.cronTime"
                type="datetime"
                value-format="YYYY-MM-DD HH:mm:ss"
                placeholder="请选择"
                size="large"
              />
            </div>
          </div>
          <div>
            <div class="item-label"><span class="red">*</span>知识点：</div>
            <div class="item-content">
              <el-cascader
                v-model="addForm.knowIds"
                :options="knowList"
                :props="props"
                collapse-tags
                collapse-tags-tooltip
                clearable
                size="large"
              />
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button v-if="isEdit" color="#155EEF" @click="editAgent()">
            修改
          </el-button>
          <el-button v-else color="#155EEF" @click="addAgent()">
            确定
          </el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
  
  <script>
import AIComponents from "@/components/AIComponents.vue";
import { id } from "element-plus/es/locales.mjs";
export default {
  components: {
    AIComponents,
  },
  data() {
    return {
      isEdit: false,
      loading: false,
      dialogVisible: false,
      total: 0,
      form: {
        startTime: "",
        endTime: "",
        page: 1,
        limit: 10,
      },
      addForm: {
        agentName: "",
        cronTime: "",
        knowIds: [],
      },
      tableData: [],
      agentOptions: ["AI图像工程学伴", "课后复习", "课前练习"],
      props: {
        //是否多选
        multiple: true,
        //false只展示最后一级id，true展示所有层级
        emitPath: false,
        value: "id",
        label: "label",
        children: "children",
      },
      knowList: [
        {
          id: 1,
          label: "Asia",
          children: [
            {
              id: 2,
              label: "China",
              children: [
                { id: 3, label: "Beijing" },
                { id: 4, label: "Shanghai" },
                { id: 5, label: "Hangzhou" },
              ],
            },
            {
              id: 6,
              label: "Japan",
              children: [
                { id: 7, label: "Tokyo" },
                { id: 8, label: "Osaka" },
                { id: 9, label: "Kyoto" },
              ],
            },
            {
              id: 10,
              label: "Korea",
              children: [
                { id: 11, label: "Seoul" },
                { id: 12, label: "Busan" },
                { id: 13, label: "Taegu" },
              ],
            },
          ],
        },
        {
          id: 14,
          label: "Europe",
          children: [
            {
              id: 15,
              label: "France",
              children: [
                { id: 16, label: "Paris" },
                { id: 17, label: "Marseille" },
                { id: 18, label: "Lyon" },
              ],
            },
            {
              id: 19,
              label: "UK",
              children: [
                { id: 20, label: "London" },
                { id: 21, label: "Birmingham" },
                { id: 22, label: "Manchester" },
              ],
            },
          ],
        },
        {
          id: 23,
          label: "North America",
          children: [
            {
              id: 24,
              label: "US",
              children: [
                { id: 25, label: "New York" },
                { id: 26, label: "Los Angeles" },
                { id: 27, label: "Washington" },
              ],
            },
            {
              id: 28,
              label: "Canada",
              children: [
                { id: 29, label: "Toronto" },
                { id: 30, label: "Montreal" },
                { id: 31, label: "Ottawa" },
              ],
            },
          ],
        },
      ],
    };
  },
  created() {
    this.getList();
    this.getKnowlist();
  },
  methods: {
    // 计算表格序号
    calculateIndex(index) {
      return (this.form.page - 1) * this.form.limit + index + 1;
    },

    clearAddForm() {
      this.addForm = {
        agentName: "",
        cronTime: "",
        knowIds: [],
      };
    },
    search() {
      //如果结束日期小于起始日期，则提示错误，日期格式为YYYY-MM-DD，转换为时间戳
      if (new Date(this.form.startTime) > new Date(this.form.endTime)) {
        this.$message.error("结束日期不能小于起始日期");
        return;
      }
      this.form.page = 1;
      this.getList();
    },
    handleClose() {
      this.dialogVisible = false;
    },
    handleCurrentChange(currentPage) {
      this.form.page = currentPage;
      this.getList();
      console.log(currentPage, 333);
    },
    handleAddAgent() {
      this.clearAddForm();
      this.dialogVisible = true;
    },
    handleEditAgent(row) {
      console.log(row);
      this.clearAddForm();
      this.addForm.agentName = row.agentName;
      this.addForm.cronTime = row.cronTime;
      this.addForm.knowIds = row.knowId;
      this.dialogVisible = true;
    },
    getList() {
      const url = "/dify/agent/list";
      const params = this.form;
      this.loading = true;
      this.$axios
        .get(url, {
          params, // 将参数传递给 `params` 属性
        })
        .then((response) => {
          const res = response;
          this.tableData = res.data;
          this.total = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    getKnowlist() {
      const url = "/dify/knowlist";
      const params = this.form;
      this.loading = true;
      this.$axios
        .get(url, {
          params, // 将参数传递给 `params` 属性
        })
        .then((response) => {
          const res = response;
          this.knowList = res.data;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    addAgent() {
      if (!this.addForm.agentName) {
        this.$message.error("请选择智能体");
        return;
      }
      if (this.addForm.knowIds.length === 0) {
        this.$message.error("请选择知识点");
        return;
      }
      const url = "/dify/agent/add";
      const data = this.addForm;
      const loading = this.$loading({
        lock: true,
        text: "正在添加，请稍后...",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.$axios
        .post(url, data)
        .then((response) => {
          const res = response;
          this.$message.success("添加成功");
          this.dialogVisible = false;
          this.getList();
        })
        .finally(() => {
          loading.close();
        });
    },
    editAgent() {
      if (!this.addForm.agentName) {
        this.$message.error("请选择智能体");
        return;
      }
      if (this.addForm.knowIds.length === 0) {
        this.$message.error("请选择知识点");
        return;
      }
      const url = "/dify/agent/edit";
      const data = {
        agentName: this.addForm.agentName,
        cronTime: this.addForm.cronTime,
      };
      const loading = this.$loading({
        lock: true,
        text: "正在修改，请稍后...",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.$axios
        .post(url, data)
        .then((response) => {
          const res = response;
          this.$message.success("添加成功");
          this.dialogVisible = false;
          this.getList();
        })
        .finally(() => {
          loading.close();
        });
    },
    delAgent(row) {
      const url = `/dify/agent/delete?id=${row.id}`;
      this.$confirm("是否删除该考核智能体？").then(() => {
        const loading = this.$loading({
          lock: true,
          text: "正在修改，请稍后...",
          background: "rgba(0, 0, 0, 0.7)",
        });
        this.$axios
          .delete(url)
          .then((response) => {
            const res = response;
            this.$message.success(res.msg || "删除成功");
            this.getList();
          })
          .finally(() => {
            loading.close();
          });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
#zhi-list {
  .step-one {
    margin-bottom: 33px;
  }
  .step-two {
    .all-box {
      padding: 38px 52px;
    }
    .all-btn {
      height: 36px;
      line-height: 36px;
    }
    .two-search-box {
      display: flex;
      justify-content: space-between;
    }
    .two-search {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
      :deep(.el-input__inner) {
        height: 38px;
      }
    }
    .two-btns {
      display: flex;
      gap: 10px;
    }
    .el-table {
      margin-bottom: 20px;
      :deep(th) {
        color: #7a8cb0;
      }
      .table-btns {
        display: flex;
        gap: 20px;
        > div {
          cursor: pointer;
          color: #457aff;
          &:hover {
            color: #2657b8;
          }
        }
      }
    }
  }
  .my-dialog {
    .my-dialog-title {
      padding: 0 48px;
      font-size: 20px;
      color: #204077;
      margin-bottom: 35px;
    }
    .my-dialog-content {
      display: flex;
      flex-direction: column;
      gap: 20px;
      padding: 20px 0 40px;
      > div {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 24px;
        .item-label {
          width: 80px;
          text-align: right;
          font-size: 16px;
          color: #000000;
          .red {
            color: red;
            margin-right: 4px;
          }
        }
        .item-content {
          :deep(.el-input) {
            width: 400px;
          }
          :deep(.el-select) {
            width: 400px;
          }
        }
      }
    }
  }
}
</style>
